<template>
	<view class="container">
		<!-- <view class="left-bottom-sign"></view> -->
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<!-- <view class="right-top-sign">
			<image src="../../static/img/login/background-top.jpg"></image>
		</view> -->
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="logo">
				<img src="../../static/img/logo.png" alt="">
			</view>
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">
				马上注册！
			</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input type="number" v-model="register.phone" placeholder="请输入手机号码" maxlength="11" data-key="phone" />
				</view>
				<view class="input-item">
					<text class="tit">验证码</text>
					<input type="number" class="verify-code" v-model="register.verifyCode" placeholder="请输入手机验证码" maxlength="6"
					 data-key="phone" />
					<view class="yzm" :class="{ yzms: second>0 }" @click="getcode">{{yanzhengma}}</view>
				</view>
				<view class="input-item">
					<text class="tit">昵称</text>
					<input type="text" v-model="register.name" placeholder="请输入账号昵称" maxlength="12" />
				</view>
				<view class="input-item">
					<text class="tit">登录密码</text>
					<input :password="!showPassword" v-model="register.password" placeholder="8-18位不含特殊字符的数字、字母组合" placeholder-class="input-empty"
					 maxlength="20" data-key="password" @confirm="bindLogin" />
					<image class="ion-img" :src="showPassword?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'" @tap="display">
					</image>
				</view>
				<view class="input-item">
					<text class="tit">确认密码</text>
					<input :password="!showPasswordAgain" v-model="register.passwordConfirm" placeholder="请您再次确认密码" placeholder-class="input-empty"
					 maxlength="20" data-key="password" @confirm="bindLogin" />
					<image class="ion-img" :src="showPasswordAgain?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'" @tap="displayAgain">
					</image>
				</view>
			</view>
			<button class="confirm-btn" @click="bindLogin" :disabled="logining">注册</button>
		</view>
	</view>
</template>

<script>
	import loginApi from '../../api/login.js';
	let _this, jsInterval;
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				register: {
					phone: '',
					verifyCode: '',
					name: '',
					password: '',
					passwordConfirm: ''
				},
				phone: '',
				password: '',
				logining: false,
				xieyi: true,
				showPasswordAgain: false,
				showPassword: false,
				second: 0,
				sbm: '',
			}
		},
		onLoad() {
			_this = this;
		},
		onHide() {
			console.log('onhide')
			clearInterval(jsInterval)
			_this.second = 0
		},
		computed: {
			yanzhengma() {
				if (this.second == 0) {
					return '获取验证码';
				} else {
					if (this.second < 10) {
						return '倒计时0' + this.second;
					} else {
						return '倒计时' + this.second;
					}
				}
			}
		},
		methods: {
			...mapMutations(['login']),
			display() {
				this.showPassword = !this.showPassword
			},
			displayAgain() {
				this.showPasswordAgain = !this.showPasswordAgain
			},
			xieyitong() {
				this.xieyi = !this.xieyi;
			},
			getcode() {
				if (this.second > 0) {
					return;
				}
				var rule = [{
						name: "phone",
						checkType: "phoneno",
						errorMsg: "请输入正确手机号"
					}

				];
				console.log(_this.register.phone)
				let checkData = {
					'phone': _this.register.phone
				}
				var checkRes = _this.$graceChecker.check(checkData, rule)
				if (!checkRes) {
					uni.showToast({
						icon: 'none',
						title: _this.$graceChecker.error
					});
					return;
				}

				loginApi.getRegisterVerify({
					'phone': _this.register.phone,
					'type': 0
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: res.msg
					})
					this.second = 60;
					jsInterval = setInterval(function() {
						_this.second--;
						if (_this.second == 0) {
							clearInterval(jsInterval)
						}
					}, 1000)

					uni.setStorageSync('verifyCode', res.code);
					uni.setStorageSync('verifyPhone', _this.register.phone);
					console.log(res.code)
				})
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				clearInterval(jsInterval)
				_this.second = 0
				uni.navigateBack();
			},
			getDeviceInfo() {
				return new Promise((resolve, reject) => {
					// #ifdef APP-PLUS
					//获取手机imei
					plus.device.getInfo({
						success: function(e) {
							console.log('getDeviceInfo success: ' + JSON.stringify(e));
							console.log('getDeviceInfo imei: ' + e.imei);
							_this.sbm = e.imei
							resolve()
						},
						fail: function(e) {
							console.log('getDeviceInfo failed: ' + JSON.stringify(e));
							resolve()
						}
					});
					// #endif
					// #ifndef APP-PLUS
					resolve()
					// #endif
				})
			},
			bindLogin() {
				var rule = [{
						name: "phone",
						checkType: "phoneno",
						errorMsg: "请输入正确手机号"
					},
					{
						name: "verifyCode",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "请输入验证码"
					},
					{
						name: "name",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "请输入昵称"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "请输入密码"
					},
				];
				let checkData = { ..._this.register
				}
				var checkRes = _this.$graceChecker.check(checkData, rule)
				if (!checkRes) {
					uni.showToast({
						icon: 'none',
						title: _this.$graceChecker.error
					});
					return;
				}
				if (checkData.password !== checkData.passwordConfirm) {
					uni.showToast({
						icon: 'none',
						title: '两次密码输入不一致'
					});
					return;
				}
				//
				let verifyPhone = uni.getStorageSync('verifyPhone')
				let verifyCode = uni.getStorageSync('verifyCode')

				if (verifyPhone != checkData.phone || verifyCode != checkData.verifyCode) {
					uni.showToast({
						icon: 'none',
						title: '手机号和验证码不匹配'

					});
					return;
				}

				_this.getDeviceInfo().then(res => {
					let regData = { ...checkData,
						sbm: _this.sbm
					}
					//验证手机号是否重复
					loginApi.isAccountSubmit({
						phone: checkData.phone
					}).then(response => {
						loginApi.userReg(regData).then(res => {
							console.log(res)
							uni.showToast({
								icon: 'none',
								title: res.msg,
								success: () => {
									uni.redirectTo({
										url: '/pages/login/login'
									})
								}
							});
						})
					})
				})


			}
		},
		watch: {
			logining(newValue, oldValue) {

			}
		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.container {
		padding-top: 15px;
		position: relative;
		width: 100vw;
		height: auto;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}

	.logo {
		text-align: center;

		image {
			width: 150upx;
			height: 150upx;
		}
	}

	.back-btn {
		position: relative;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		font-size: 40upx;
		color: $font-color-dark;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 0upx;
		z-index: 95;
		display: block;
		float: left;
		width: 100%;

		image {
			height: 260upx;
			width: 100%;
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}

	.input-content {
		padding: 0 60upx;
	}

	.input-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 30upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}

		.verify-code {
			width: 300upx;
		}

		.ion-img {
			width: 35upx;
			height: 35upx;
			position: absolute;
			bottom: 24upx;
			right: 20upx;
		}
	}

	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}
	}

	.forget-section {
		font-size: $font-sm+2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm+2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}

	.xieyi {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		margin-top: 26upx;
		color: #FFA800;
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}

	.xieyi image {
		width: 40upx;
		height: 40upx;
	}

	.yzm {
		position: absolute;
		right: 20upx;
		bottom: 15upx;
		color: #fff;
		font-size: 24upx;
		line-height: 54upx;
		padding-left: 20upx;
		padding-right: 20upx;
		width: auto;
		height: 54upx;
		background: $uni-color-primary;
		border: 1upx solid #fa436a;
		border-radius: 70upx;
	}

	.yzms {
		color: #ffffff !important;
		background: #999999;
		border: 1upx solid #999999;
	}
</style>
